
<div id="themeroller-alert-tips" class="alert alert-warning">
<p>选择颜色后，任意点击其他区域取色器消失时，自动预览效果。</p>
<p>其它类型的输入框失去焦点时，自动预览效果。</p>
</div>
<form id="themeroller-form" action="{{Router::url('/admin/stylevars/getcss')}}" method="post" target="_blank">
	{{loop $variable_collects $collect_tab}}
		<?php		
		$tabs.= '<li><a href="#'.$collect_tab['id'].'" data-toggle="tab">'.$collect_tab['name'].'</a>'; 
		$tab_content .= '<div class="tab-pane" id="'.$collect_tab['id'].'">';
		?>
		
		{{loop $collect_tab['items'] $collect}}
		<?PHP 
			$tab_content .= '
		<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle collapsed" data-toggle="collapse"
				href="javascript:;">'.$collect['name'].'</a>
		</div>
		<div class="accordion-body in collapse"
			style="height: auto;">
			<div class="row">';
		?>
		
				{{loop $collect['varis'] $vn}}
					<?php if(empty($vn)){ continue;}elseif($vn=="-"){$tab_content .= '<div class="clearfix"></div>';continue;}
					$tab_content .= '
					<div class="col-sm-6">
						<div class="input-group">
							<span class="input-group-addon">'.lang($vn).'<i></i></span>
							<input class="form-control"  type="text" data-complie="'.htmlentities($values[$vn]).'" data-variable="'.$variables[$vn].'" value="'.htmlentities($variables[$vn]).'" title="'.$variables[$vn].'" data-name="'.$vn.'" name="data['.$vn.']" data-placement="top">
							<span class="input-group-addon chose-color" style="background:'.$values[$vn].'"><i></i></span>
						</div>
					</div>';
					?>
				{{/loop}}
			<?PHP 
			$tab_content .= '</div>
		</div></div>';?>
		{{/loop}}
			<?php $tab_content .= '</div>'; ?>
	{{/loop}}
	<ul id="bs-theme-roller-tabs" class="nav nav-tabs">
		{{$tabs}}
	</ul>
	
	<!-- Tab panes -->
	<div class="tab-content">
		{{$tab_content}}
	</div>
	<input type="hidden" id="themeroller-submit-type" name="submit-type" value="" />
</form>

{{$this->Html->css(array('bootstrap-colorpicker.min.css',))}}
{{$this->Html->script(array('bootstrap-colorpicker.min.js',))}}
<script>

$(function(){
	$('#bs-theme-roller-tabs a:first').tab('show')
	//$('#pallette-tools input').tooltip();
	//$('input').colorpicker();
	$(document).on('click','#themeroller-form .chose-color',function(){
		var obj = $(this).siblings('input');
		var str = obj.data('complie');
		bindblur(obj);
		// var re = /@|\(/;//（含函数括号或者@变量的） if(!re.test(str)){ 
		if(typeof(str)=="string" && str.substring(0,1)=="#" && $(this).data('initpicker')!=true){ // 含#的输入框，绑定颜色选择器
			//$(this).css('background-color',str);
				$(this).colorpicker().on('changeColor', function(ev){
					obj.val(ev.color.toHex());
					$(this).css('background-color',ev.color.toHex());
				}).on('hidePicker',function(ev){
					if(obj.val() != obj.data('last-value')) {
						obj.trigger('blur');
					}
				});
				$(this).colorpicker('show');
				$(this).data('initpicker',true);
			//$(this).val($(this).data('variable'));			
		}
		else{
			//alert(1);
		}
	});

	$('#themeroller-form input').each(function(){
		$(this).data('last-value',$(this).val());
		var obj = $(this);
		bindblur(obj);
	})
		
	function bindblur(obj){
		if(obj.data('bindblur')!=true){
			obj.on('blur',function(){
				if(obj.val() == obj.data('last-value')) {
					return;
				}
				else{
					obj.data('last-value',obj.val());
				}

				//if($(this).data('variable')!=$(this).val())
				{
					var form = $('#themeroller-form');
					/*//更新编辑器区域的表单。
					$.ajax({
						type:'post',
						url: ADMIN_BASEURL+'/admin/stylevars/themeroller',
						data: form.serialize(),
						success:function(request){
							form.html($(request).find('#themeroller-form').html());
						},
						dataType:'html'
					});*/
					//将新的css文件追加到页面，
					//   url长度最大1024，get类型传参是否够用。
					//   若post类型如何追加css到页面
					$.ajax({
						type:'post',
						url: ADMIN_BASEURL+'/admin/stylevars/getcss',
						data: form.serialize(),
						success:function(request){
							// form.html($(request).find('#themeroller-form').html());
							// var cssLink = '<link flag="themeroller" href="'+BASEURL+'/stylevars/getcss?'+ currSrc +'" type="text/css" rel="Stylesheet" />';
							$("head").append(request);
							if( $("link[flag=themeroller]").size() > 1){
								$("link[flag=themeroller]:first").remove();
							}
						},
						dataType:'html'
					});
				}
			});
			obj.data('bindblur',true);
		}
	}
	setTimeout(function(){$('#themeroller-alert-tips').remove();}, 6000);
	
})
</script>